<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog dialogSize="large" [loading]="loading()">
    <span bitDialogTitle class="tw-font-medium">{{ upgradeToMessage() }}</span>
    <ng-container bitDialogContent>
      <section>
        @if (isFamiliesPlan) {
          @if (userIsOwnerOfFreeOrg$ | async) {
            <div class="tw-pb-2">
              <bit-callout type="info">
                {{ "formWillCreateNewFamiliesOrgMessage" | i18n }}
                <a
                  bitLink
                  bitDialogClose
                  linkType="primary"
                  [routerLink]="adminConsoleRouteForOwnedOrganization$ | async"
                >
                  {{ "upgradeNow" | i18n }}
                  <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
                </a>
              </bit-callout>
            </div>
          }
          <div class="tw-pb-4">
            <bit-form-field class="!tw-mb-0">
              <bit-label>{{ "organizationName" | i18n }}</bit-label>
              <input bitInput type="text" formControlName="organizationName" required />
            </bit-form-field>
            <p bitTypography="helper" class="tw-text-muted tw-pt-1 tw-pl-1">
              {{ "organizationNameDescription" | i18n }}
            </p>
          </div>
        }
        <div class="tw-pb-8 !tw-mx-0">
          <h5 bitTypography="h5">{{ "paymentMethod" | i18n }}</h5>
          <app-enter-payment-method
            [showBankAccount]="isFamiliesPlan"
            [showAccountCredit]="!isFamiliesPlan"
            [group]="formGroup.controls.paymentForm"
            [includeBillingAddress]="false"
            [hasEnoughAccountCredit]="hasEnoughAccountCredit$ | async"
            #paymentComponent
          ></app-enter-payment-method>
          <h5 bitTypography="h5" class="tw-pt-4 tw-pb-2">{{ "billingAddress" | i18n }}</h5>
          <app-enter-billing-address
            [group]="formGroup.controls.billingAddress"
            [scenario]="{ type: 'checkout', supportsTaxId: false }"
          >
          </app-enter-billing-address>
        </div>
      </section>

      <section>
        <billing-cart-summary
          #cartSummaryComponent
          [passwordManager]="passwordManager()"
          [estimatedTax]="estimatedTax$ | async"
        ></billing-cart-summary>
        @if (isFamiliesPlan) {
          <p bitTypography="helper" class="tw-italic tw-text-muted !tw-mb-0">
            {{ "paymentChargedWithTrial" | i18n }}
          </p>
        }
      </section>
    </ng-container>

    <ng-container bitDialogFooter>
      <button
        bitButton
        bitFormButton
        buttonType="primary"
        [disabled]="loading() || !isFormValid() || !(hasEnoughAccountCredit$ | async)"
        type="submit"
      >
        {{ "upgrade" | i18n }}
      </button>
      <button
        bitButton
        type="button"
        buttonType="secondary"
        (click)="goBack.emit()"
        [disabled]="loading()"
      >
        {{ "back" | i18n }}
      </button>
    </ng-container>
  </bit-dialog>
</form>
